<template>
    <div class="detail"
        v-loading="loading.status"
        :element-loading-text="loading.txt">
        <div class="detail-h clear">
            <div>
                <span>{{materialData.name}}</span><strong>({{materialData.gvs_name}})</strong><i class="el-icon-edit" @click="saveMaterialBox"></i>
            </div>
        </div>

        <div class="detail-c">
            <ul>
                <li class="detail-unit" v-for="(item, index) in knowledgeList" :key="item.id">
                    <div class="detail-uni-h clear">
                        <el-tooltip class="item" effect="dark" content="点击编辑" placement="right-start">
                            <el-input v-model.trim="item.name" @blur="saveChapter(item)"
                                    @keyup.enter.native.stop="$event.target.blur" placeholder="请输入内容"></el-input>
                        </el-tooltip>
                        <div class="detail-uni-p fr">
                            <el-tooltip class="item" effect="dark" content="添加" placement="top-start">
                                <el-button type="primary" icon="el-icon-plus" circle @click="addSection(index)"></el-button>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                                <el-button type="danger" icon="el-icon-delete" @click="deleteChapter(item , index, -1)" circle></el-button>
                            </el-tooltip>
                        </div>
                    </div>
                    <ul>
                        <li class="detail-unit-section" v-for="(item2, index2) in item.children" :key="index2">
                            <div class="detail-uni-h clear">
                                <el-tooltip class="item" effect="dark" content="点击编辑" placement="right-start">
                                    <!-- 处理 keyup 和 blur 事件冲突 $event.target.blur -->
                                    <el-input v-model.trim="item2.name" :ref="`sectionbox${index}_${index2}`" @blur="saveChapter(item2)"
                                        @keyup.enter.native.stop="$event.target.blur" placeholder="请输入内容"></el-input>
                                </el-tooltip>
                                <div class="detail-uni-p fr">
                                    <el-tooltip class="item" effect="dark" content="删除" placement="right-start">
                                        <el-button type="danger" icon="el-icon-delete" circle @click="deleteChapter(item2 , index,index2)" ></el-button>
                                    </el-tooltip>
                                </div>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>

        <!-- 添加/编辑教材 -->
        <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" title="编辑教材" :visible.sync="teachingMaterial" class="teachingMaterial" width="400px">
            <el-form :model="addForm" ref="addForm" :rules="rules" status-icon label-position="left" label-width="80px">
                <el-form-item label="教材名称"  prop="name">
                    <el-input 
                        v-model="addForm.name" 
                        placeholder="请输入教材名称" 
                        autocomplete="off" 
                        :maxlength="parseInt(20)"
                        clearable>
                    </el-input>
                </el-form-item>
                <el-form-item label="科目" prop="gvs_id">
                    <el-select v-model="addForm.gvs_id"
                    filterable :disabled="true"
                        placeholder="请选择">
                        <el-option 
                        v-for="item in subjectData"
                        :key="item.id"
                        :label="item.name"
                        :value="item.subject_id+'-'+item.version_id">
                        </el-option>
                    </el-select>
                    <!-- <el-button type="text" @click="subject()">新增科目</el-button>    style="width:70%; margin-right: 5px; " -->
                </el-form-item>
                <el-form-item label="年级" prop="stu_id">
                    <el-select v-model="addForm.stu_id" :disabled="true"  filterable placeholder="请选择">
                        <template v-for="item in orgLevel3">
                            <el-option 
                                v-if="parseInt(item.id) > 0"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </template>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveMaterial">确定</el-button>
            </div>
        </el-dialog>
        <!--  -->

        <div class="add-uni">
            <el-tooltip class="item" effect="dark" content="添加" placement="top-start" v-if="newNniBtn">
                <el-button type="primary" icon="el-icon-plus" circle @click="addChapterBox()"></el-button>
            </el-tooltip>
            <transition name="fade" mode="out-in">
                <div class="new-uni clear" v-if="newNni">
                    <el-input ref="newchapter" v-model.trim="chapterUnit.name" placeholder="请输入内容" class="fl"></el-input>
                    <div class="new-uni-p fl">
                        <el-button type="primary" @click="addChapter()">保存</el-button>
                        <el-button type="danger" @click="cancel">取消</el-button>
                    </div>
                </div>
            </transition>
        </div>
    </div>
</template>

<script>
	export default{
		data(){
			return {
				loading:{
					status:false,
					txt:'获取数据...'
				},
				materialData:{},
				knowledgeList:[],
				input: '',
				newNniBtn: true,
				newNni: false, //添加一级知识点


				subjectData:[],
				orgLevelParam:{ //获取年级参数
					level:3,
					direction:'balance',
				},
				teachingMaterial: false,
				addForm: {
		    		id:'',
		    		name:'',
		    		gvs_id:'',
		    		sub_id:'',
		    		ver_id:'',
                    stu_id:'',
                    type: 2
		    	},
		    	chapterUnit:{
		    		material_id:this.$route.params.id,
		    		name:'',
                    pid:0,
                    type: 2
		    	},
		    	orgLevel3:[],
		    	rules:{
		    		type: [

        	        ],
		    	},
			}
		},
		created(){
			this.getData();
			this.getOrgLevel3();
			this.getSubjectBoxData();
			this.getInfo();
		},
		methods: {
			getData(){
				let success = (data=>{
            		this.materialData = data.data[0];
            	})
            	//执行请求，并将回调方法变成config成员以便鉴权过期可以执行
            	this.$ajax.get('api/cate/material',{params: {id:this.$route.params.id},func:{success:success}})
			},
			getInfo(){
				this.loading.status = true;
				let success = (data=>{
					this.loading.status = false;
            		this.knowledgeList = data.data;
            	})
            	let fail = (data=>{
            		this.loading.status = false;
            		this.$message.error(data.msg)
                })
                let param = {
                    material_id: this.$route.params.id, 
                    level: 1,
                    type: 2
                }                
                
            	this.$ajax.get('api/cate/cate_list',{params: param, func:{success:success,fail:fail}})
			},
			addChapter(obj){
				if (this.chapterUnit.name === '') {
					this.$message.error('不能为空');
					return
				}
				
				let success = ( data=>{
					this.newNniBtn = true
					this.newNni = false;
					this.getInfo();
					this.getData();
            		this.$message.success(data.msg);
            		this.resetChapterUnit();
                })
                
				this.$ajax.post('api/cate/cate_list',this.chapterUnit,{func:{success:success}})
			},
			deleteChapter(obj , inx1 = -1, inx2  = -1){
				if( is_empty(obj) || obj.id === 0 ){
					if( inx1 > -1 && inx2 === -1 ){
						this.knowledgeList.splice(inx1 , 1);

					}else if(  inx1 > -1 && inx2 > -1 ){
						if( inx1 > -1 && inx2 > -1 ){
							this.knowledgeList[inx1].children.splice(inx2 , 1);
						}
					}else{
						this.$message.error( '删除失败' );
					}

				}else{
					let yes = ( data => {
						let success = (data => {
							this.$message.success( data.msg );
							this.getInfo();
							this.getData();
						})
						this.$ajax.delete('api/cate/cate_list',{params:{id:obj.id,type: 2},func:{success:success}})
					})
					let cancel = ( data => {})
					this.e_confirm({yes:yes,cancel:cancel,txt:'确定将 '+obj.name+' 删除吗？'});
				}
				
			},
			saveChapter(obj){
				if (obj.name === '') {
					this.$message.error('不能为空');
					return
				}
				var params  = {
					id:obj.id,
                    name:obj.name,
                    type: 2
				}
				let success = ( data=>{
            		this.$message.success(data.msg);
            		this.getInfo();
            		this.getData();
            	})
            	let fail =  ( data=>{
            		this.$message.error(data.msg);
            		this.getInfo();
            		this.getData();
            	})

            	if( parseInt(obj.id) > 0 ){
            		this.$ajax.put('api/cate/cate_list',params,{func:{success, fail}})
            	}else{
            		params.pid = obj.pid;
            		params.material_id = obj.material_id;
            		this.$ajax.post('api/cate/cate_list',params,{func:{success, fail}})
            	}
			},
			saveMaterialBox(){
				this.teachingMaterial = true;
				this.addForm.id = this.materialData.id;
	    		this.addForm.name = this.materialData.name;
	    		this.addForm.gvs_id = this.materialData.subject_id+'-'+this.materialData.version_id;
	    		this.addForm.stu_id = this.materialData.grade_id;
			},
			//保存教材
			saveMaterial(){
				this.addForm.sub_id = this.addForm.gvs_id.split("-")[0];
				this.addForm.ver_id = this.addForm.gvs_id.split("-")[1];
				let success = ( data=>{
					this.teachingMaterial = false;
            		this.$message.success(data.msg);
            		this.getData();
            	})
				this.$ajax.put('api/cate/material',this.addForm,{func:{success:success}})
			},
			//获取添加教材弹框版本下拉数据
			getSubjectBoxData(){
				let success = (data=>{
            		this.subjectData = data.data;
            	})
            	//执行请求，并将回调方法变成config成员以便鉴权过期可以执行
            	this.$ajax.get('api/cate/subject_data',{params: {},func:{success:success}})
			},
			//获取年级
			getOrgLevel3(){
				let success = ( data=>{
            		this.orgLevel3 = data.data;
            		this.orgLevel3.unshift({id:0,name:'全部'})
            	})
            	this.$ajax.get('api/org/org',{params: this.orgLevelParam,func:{success:success}})
			},
			//添加节
			addSection(index){
                this.knowledgeList[index].children.push({id:0,material_id:this.$route.params.id,pid:this.knowledgeList[index].id,name: ''})
                
                this.$nextTick(() => {
                    this.$refs[`sectionbox${index}_${this.knowledgeList[index].children.length - 1}`][0].focus();
                })
			},
			
			//取消
			cancel(){
				this.newNniBtn = true
				this.newNni = false;
			},
			
			//添加章节
			addChapterBox(){
				this.newNniBtn = false
                this.newNni = true;
                
                this.$nextTick(() => {
                    this.$refs.newchapter.focus();
                })
			},
			resetChapterUnit(){
				this.chapterUnit.pid =  0
				this.chapterUnit.name =  ''
			},
			subject(){
		    	this.$router.push("/resources/resource/textbook-management?name=subject")
		    },
		}
	}
</script>


<style lang="scss">
	.detail{
		margin-top: 30px;
		.el-button--small.is-circle{
			padding: 6px
		}
	}

	.detail-h{
		margin-bottom: 40px;
		>div{
			&:nth-of-type(1){
				float: left;
				>span{
					font-size: 16px;
					font-weight: 600;
				}
				>strong{
					font-weight: initial;
					padding: 0 20px;
					color: #999;
				}
				>i{
					font-size: 18px;
				}
			}
			&:nth-of-type(2){
				float: right;
				>span{
					margin-left: 40px;
					>i{
						font-weight: initial;
						font-style: initial;
						padding-left: 10px;
						color: #409EFF;
					}
				}
			}
		}
	}
	
	.detail-uni-hd{
		border-bottom: 1px solid #ddd;
		padding-bottom: 20px;
	}

	.detail-uni-h{
		.el-input{
			width: 400px;
			float: left;
		}
		.el-input__inner{
			border-radius: 0;
			font-size: 16px;
			border: 1px solid #ffffff;
			&:hover,
			&:focus{
				border-color: #409EFF;
			}
		}
	}

	.detail-unit{
		margin-bottom: 30px;
		>.detail-uni-h{
			border-bottom: 1px solid #ddd;
			padding-bottom: 20px;
		}
		>ul{
			padding: 0 0 0 20px;
			>li{
				border-bottom: 1px solid #ddd;
				padding: 10px 0;
				.el-input__inner{
					font-size: 14px;
				}
			}
		}
	}

	.add-uni{
		.el-input{
			width: 400px;
			border-radius: 0;
			margin-right: 60px;
		}
	}
</style>